<template>
    <div style="min-width:809px">
        <div v-if="$route.path == '/techniciansCommission'">
            <div class="vs-search-box">
                <el-form ref="form" :inline="true" :model="paging" label-width="120px">
                    <el-form-item label="门店" >
                        <el-select v-model="paging.store_id" placeholder="请选择" style="width:280px">
                            <el-option
                            v-for="item in options"
                            :key="item.id"
                            :label="item.title"
                            :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="" class="vs-right-btns">
                         <el-button @click="reset">重置</el-button>
                         <el-button @click="handleCurrentChange(1)" type="primary">查询</el-button>
                    </el-form-item>
                </el-form>
            </div>
            <div class="vs-table-box">
                 <!-- <div class="operation-box clear-float">
                    <el-button style="margin-left:auto;" type="primary" @click="setRow(1)">新增</el-button>
                </div> -->
                <el-table v-loading="loading" :data="tableData" header-row-class-name="has-gutter-table" style="width: 100%">
                   <el-table-column width="80" label="序号" prop="id" ></el-table-column>
                    <el-table-column  label="门店" min-width="150">
                       <template slot-scope="scope">
                            {{scope.row.store.title}}
                        </template>
                    </el-table-column>
                    <el-table-column prop="title" label="提成制度名称" min-width="150"></el-table-column>
                    <!-- <el-table-column  label="提成方式" min-width="150">
                        <template slot-scope="scope">
                            {{scope.row.type == 1 ? "百分比提成" : "时长提成"}}
                        </template>
                    </el-table-column> -->
                    <el-table-column  label="提成组合" min-width="150" prop="content"></el-table-column>
                    <el-table-column  label="创建日期" min-width="150" prop="create_time"></el-table-column>
                    <!-- <el-table-column fixed="right" width="109" label="操作"> 
                        <template slot-scope="scope">
                            <span @click="setRow(2,scope.row)" class="tab-table-text">编辑</span>
                            <span @click="setRow(3,scope.row)" class="tab-red-text">删除</span>
                        </template>
                </el-table-column> -->
                </el-table>
                 <div class="vs-paging-box">
                    <el-pagination
                        @current-change="handleCurrentChange"
                        :current-page.sync="paging.page"
                        :page-size="paging.limit"
                        layout="prev, pager, next, jumper"
                        :total="paging.total">
                    </el-pagination>
                </div>
            </div>
        </div>
       <el-dialog 
        width="600px"
        :close-on-click-modal="false"
        :before-close="handleClose"
        :title="form.id ?'修改提成配置':'添加提成配置'" 
        :visible.sync="isAdd">
            <el-form :model="form" :rules="rules" ref="form" label-width="170px">
                <el-form-item prop="store_id" label="门店">
                      <el-select v-model="form.store_id" placeholder="请选择" style="width:280px">
                        <el-option
                        v-for="item in options"
                        :key="item.id"
                        :label="item.title"
                        :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item prop="gt_ratio" label="大于3人时提成比例">
                    <el-input v-model="form.gt_ratio" placeholder="请输入" style="width:280px" type="number"></el-input>
                </el-form-item>
                <el-form-item prop="lt_ratio" label="小于等于3人时提成比例">
                    <el-input v-model="form.lt_ratio" placeholder="请输入" style="width:280px" type="number"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="handleClose()">取 消</el-button>
                <el-button type="primary" @click="subitm">确 定</el-button>
            </span>
        </el-dialog>
        <router-view></router-view>
    </div>
</template>

<script>
export default {
    data() {
        return {
            options:[],
            isAdd:false,
            recordList: [],
            loading: false,
            loading2: false,
            isBtn: false,
            isInfo: false,
            dialogVisible: false,
            paging: {
                store_id:'',
                page: 1,
                total: 0,
                limit: 10,
            },
             rules:{
                store_id:{ required: true, message: '请选择门店', trigger: 'change' },
                gt_ratio:{ required: true, message: '请输入大于3人时提成比例', trigger: 'blur' },
                lt_ratio:{ required: true, message: '请输入小于等于3人时提成比例', trigger: 'blur' },
            },
            form: {
                store_id: "",
                id:'',
                gt_ratio:'',
                lt_ratio:''
            },
            tableData: []
        };
    },
    created() {
        if (this.$route.path == '/techniciansCommission') {
            this.handleCurrentChange(1);
            this.homegetStore()
        }
    },
    methods: {
        changeDate(e){
            let time = this.utils.timeMonth(e)
            this.form.date = time
        },
        // 获取门店列表
        async homegetStore() {
            let { code, data } = await this.$Http.homegetStore();
            if (code) {
                this.options = data
            }
        },
        subitm(){
            this.$refs['form'].validate(async (valid) => {
                if (!valid)return;
                console.log(this.form,'this.form');
                let {code} = await this.$Http.setRoyaltyReception(this.form);
                if(code){
                    this.$message.success(this.form.id?'修改成功':'添加成功')
                    this.handleCurrentChange(1);
                    this.handleClose()
                }
            });
        },
        async setRow(type, row) {
            if (type == 1) {//新增
                 this.utils.goUrl(`/techniciansCommissionDetails?title=新增技师提成配置`)
            } else if (type == 2) {//编辑
                this.utils.goUrl(`/techniciansCommissionDetails?title=编辑技师提成配置&id=${row.id}`)        
            }else{//删除
                this.$msgbox({
                    title: '提示',
                    message: '确定要删除该提成配置吗?',
                    type: 'warning',
                    showCancelButton: true,
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    beforeClose:async (action, instance, done) => {
                        if (action === 'confirm') {
                        instance.confirmButtonLoading = true;
                        instance.confirmButtonText = '执行中...';
                        let {code,data} = await this.$Http.delRoyaltyTech({id:row.id})
                            if(code){
                                this.$message.success('删除成功!');
                                this.handleCurrentChange(1)
                            }
                            done();
                            instance.confirmButtonLoading = false;
                        } else {
                            done();
                        }
                    }
                }).then(action => {

                }).catch(()=>{});
            }
        },
        handleClose(dom) {
            this.$refs['form'].resetFields();
            this.form = this.$options.data().form;
            this.isAdd = false;
            dom && dom();
        },
        async repairGetList() {
            this.loading = true;
            let { code, data } = await this.$Http.getRoyaltyTech(this.paging);
            this.loading = false;
            if (code) {
                this.tableData = data.data;
                this.paging.limit =data.per_page
                this.paging.total = data.total;
            }
        },
        reset() {//重置
            this.paging = this.$options.data().paging;
            this.form.date = '';
            this.handleCurrentChange(1)
        },
        handleSizeChange(val) {
            this.paging.limit = val;
            this.repairGetList()
        },
        handleCurrentChange(val) {
            this.paging.page = val;
            this.repairGetList()
        }
    },
};
</script>

<style lang="scss" scoped>
.image-thumbnail {
    width: 130px;
    height: 130px;
}
</style>